<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>添加员工</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .modal {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex; align-items: center; justify-content: center;
        }
        .modal-content {
            background: white;
            padding: 20px;
            width: 600px;
            border-radius: 10px;
        }
        .project-item {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
        }
        label {
            display: inline-block;
            width: 100px;
            margin-top: 10px;
        }
        input {
            width: 70%;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="showModal = true">添加员工</button>

    <div class="modal" v-if="showModal">
        <div class="modal-content">
            <h3>添加员工信息</h3>
            <div>
                <label>用户名:</label>
                <input v-model="newEmployee.username" type="text">
            </div>
            <div>
                <label>姓名:</label>
                <input v-model="newEmployee.name" type="text">
            </div>
            <div>
                <label>性别:</label>
                <select v-model="newEmployee.gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div>
                <label>电话:</label>
                <input v-model="newEmployee.phone" type="text">
            </div>
            <div>
                <label>职位:</label>
                <input v-model="newEmployee.job" type="text">
            </div>
            <div>
                <label>薪资:</label>
                <input v-model="newEmployee.salary" type="number">
            </div>
            <div>
                <label>头像URL:</label>
                <input v-model="newEmployee.image" type="text">
            </div>

            <h4>项目经历</h4>
            <div v-for="(proj, index) in newEmployee.projects" :key="index" class="project-item">
                <div>
                    <label>开始时间:</label>
                    <input type="date" v-model="proj.begin">
                </div>
                <div>
                    <label>结束时间:</label>
                    <input type="date" v-model="proj.end">
                </div>
                <div>
                    <label>公司:</label>
                    <input type="text" v-model="proj.company">
                </div>
                <div>
                    <label>职位:</label>
                    <input type="text" v-model="proj.job">
                </div>
                <button @click="removeProject(index)">删除该项目</button>
            </div>
            <button @click="addProject">添加项目经历</button>

            <div style="margin-top: 20px;">
                <button @click="submit">提交</button>
                <button @click="showModal = false">取消</button>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            showModal: false,
            newEmployee: {
                username: '',
                name: '',
                gender: '',
                phone: '',
                job: '',
                salary: '',
                image: '',
                projects: []
            }
        },
        methods: {
            addProject() {
                this.newEmployee.projects.push({
                    begin: '',
                    end: '',
                    company: '',
                    job: ''
                });
            },
            removeProject(index) {
                this.newEmployee.projects.splice(index, 1);
            },
            submit() {
                console.log('提交的员工信息：', this.newEmployee);
                alert("提交成功！打开控制台查看数据");
                this.showModal = false;
                this.resetForm();
            },
            resetForm() {
                this.newEmployee = {
                    username: '',
                    name: '',
                    gender: '',
                    phone: '',
                    job: '',
                    salary: '',
                    image: '',
                    projects: []
                };
            }
        }
    });
</script>
</body>
</html>
